<template>
	<div ref="SysOrg">
		<el-dialog title="菜单信息" width="800px" :visible.sync="dialogFormVisible" :close-on-press-escape="false"
			:close-on-click-modal="false" @closed="afterCloseDialog">
			<el-form :model="sysMenuForm" ref="sysMenuForm" :rules="formRules" label-width="100px">
				<el-row>
					<el-col>
						<el-form-item label="上级菜单" prop="parentId">
							<selectTree :options="menus" v-model="sysMenuForm.parentId" :props="defaultProps">
							</selectTree>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :md="12">
						<el-form-item label="菜单名称" prop="menuName">
							<el-input v-model="sysMenuForm.menuName" maxlength="30"></el-input>
						</el-form-item>
					</el-col>
					<el-col :md="12">
						<el-form-item label="菜单路由" prop="menuUrl">
							<el-input v-model="sysMenuForm.menuUrl"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :md="12">
						<el-form-item label="菜单图标" prop="menuIcon">
							<el-input v-model="sysMenuForm.menuIcon" maxlength="50"></el-input>
						</el-form-item>
					</el-col>
					<el-col :md="12">
						<el-form-item label="顺序" prop="sort">
							<el-input v-model="sysMenuForm.sort" maxlength="4" max="999" min="0" type="number">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">返回</el-button>
				<el-button type="primary" @click="saveForm">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import selectTree from "@/components/SelectTree";
	export default {
		name: "SysMenu",
		components: {
			selectTree
		},
		data() {
			return {
				// 控制视窗开启/关闭
				dialogFormVisible: false,
				sysMenuForm: {
					id: "",
					menuName: "",
					menuUrl: "",
					menuIcon: "",
					sort: 1,
					parentId: ""
				},
				formRules: {
					menuName: [{
						required: true,
						message: "菜单名称必填"
					}],
					menuUrl: [{
						required: true,
						message: "菜单路由必填"
					}]
				},
				menus: [],
				defaultProps: {
					parent: "parentId", // 父级唯一标识
					value: "id", // 唯一标识
					label: "menuName", // 标签显示
					children: "children" // 子级
				}
			};
		},
		methods: {
			// 打开弹窗
			initForm(id) {
				this.$api.post('/menu/findAllForTree').then(response => {
					this.menus = response.data;
				});
				if (id) {
					this.$api.post('/menu/getById', {id:id}).then(response => {
						this.sysMenuForm = response.data;
						this.dialogFormVisible = true;
					});
				} else {
					this.dialogFormVisible = true;
				}
			},
			handOpenModal() {
				this.$refs.sysOrgTree.initForm();
			},
			// 保存事件
			saveForm() {
				let url = '/menu/add';
				if (this.sysMenuForm.id) {
					url = '/menu/update';
				}
				this.$refs.sysMenuForm.validate(valid => {
					if (valid) {
						this.$api.post(url, this.sysMenuForm).then(response => {
							if (response.success) {
								this.$message.success(response.message);
								this.dialogFormVisible = false;
								this.$parent.handleSearch();
							} else {
								this.$message.error(response.message);
							}
						});
					}
				});
			},
			afterCloseDialog() {
				this.sysMenuForm = {
					id: "",
					orgName: "",
					description: "",
					parentId: "",
					parentName: ""
				};
				this.$refs.sysMenuForm.resetFields();
			}
		}
	};
</script>
